<template>
  <div class="zhibo_Box">
    <div class="listnav">
      <span class="word">所有直播</span>
    </div>
    <div class="content">
      <div class="listbox" v-for="item in resdata" :key="item.liveID">
        <div class="faceimgbox">
          <img
            :src="item.liveface"
            alt=""
            class="faceimg"
            @click="todetail(item.liveID,item.dakaname)"
          />
        </div>
        <div class="stage">{{ item.stage }}</div>
        <div class="infobox">
          <a href="" class="title">{{ item.livetitle }}</a>
          <div class="info_mid">
            <img :src="item.dakaimg" alt="" class="dakaimg" />
            <span class="dakaname">{{ item.dakaname }}</span>
          </div>
          <div class="info-bottom">
            <span class="person">{{ item.interest }}</span>
            <div class="btn" @click="todetail(item.liveID, item.dakaname)">
              查看详情
            </div>
          </div>
        </div>
      </div>
      <div class="loadmore" @click="loadmore">加载更多......</div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      resdata: "",
    };
  },
  methods: {
    loadmore() {
      this.axios.get(`/Daka/loadmore?start=${this.resdata.length}`).then((req) => {
        this.resdata = this.resdata.concat(req.data);
        // console.log(this.resdata);
      });
    },
    todetail(id, dakaname) {
      // console.log(id, dakaname);
      this.$router.push({
        name: "zhibodetail",
        query: { liveID: id, name1: dakaname },
      });
    },
  },
  mounted() {
    this.axios.get("/Daka/zhibo").then((res) => {
      // console.log(res.data);
      this.resdata = res.data;
      // console.log(res.data);
    });
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
.loadmore {
  width: 100%;
  height: 80px;
  color: #87959f;
  text-align: center;
  line-height: 50px;
}
.stage {
  width: 60px;
  height: 24px;
  border-radius: 12px;
  font-size: 12px;
  text-align: center;
  color: white;
  line-height: 24px;
  background-color: rgba(39, 39, 39, 0.5);
  position: absolute;
  top: 10px;
  left: 10px;
}
.content {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: -30px;
}
.faceimgbox {
  overflow: hidden;
}
.listbox {
  width: 380px;
  height: 400px;
  box-shadow: 0 0 white;
  transition: all 1s;
  border-radius: 6px 6px 6px 6px;
  margin-top: 50px;
  margin-right: 20px;
  position: relative;
}
.listbox:hover {
  box-shadow: -5px 5px 12px -4px rgb(231, 231, 231),
    5px 5px 12px -4px rgb(231, 231, 231);
}

.faceimg {
  width: 380px;
  height: 220px;
  border-radius: 6px 6px 0 0;
  transition: all 0.6s;
}
.faceimg:hover {
  transform: scale(1.1);
}
.infobox {
  width: 365px;
  height: 145px;
  padding: 20px 0 10px 15px;
  box-shadow: -5px 5px 6px -4px rgb(231, 231, 231),
    5px 5px 6px -4px rgb(231, 231, 231);
}
.listnav {
  width: 100%;
  height: 30px;
  margin-top: 20px;
}
.word {
  display: inline-block;
  width: 90px;
  height: 30px;
  line-height: 30px;
  color: #ddb256;
  border: 1px solid #ddb256;
  border-radius: 15px;
  text-align: center;
}
.dakaimg {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  vertical-align: middle;
  /* background-color: red; */
}
.title {
  display: inline-block;
  height: 56px;
  color: #434343;
  font-size: 20px;
}
.btn {
  width: 140px;
  height: 36px;
  border: 1px solid #dcd3bc;
  border-radius: 20px;
  text-align: center;
  font-size: 12px;
  line-height: 34px;
  color: #634b19;
  transition: all 1s;
}
.btn:hover {
  background-color: rgb(237, 206, 140);
}
.dakaname {
  display: inline-block;
  font-size: 14px;
  line-height: 26px;
  font-family: PingFang SC, Lantinghei SC, Helvetica Neue, Helvetica, Arial,
    Microsoft YaHei, \\\5fae\8f6f\96c5\9ed1, STHeitiSC-Light, simsun,
    \\\5b8b\4f53, WenQuanYi Zen Hei, WenQuanYi Micro Hei, "sans-serif";
  -webkit-font-smoothing: antialiased;
  cursor: default;
  font-weight: 500;
  color: #525a67;
}
.info_mid {
  width: 340px;
  height: 26px;
  line-height: 26px;
  margin-top: 10px;
}
.dakaname {
  display: inline-block;
  font-size: 14px;
  line-height: 26px;
  margin-left: 12px;
  color: #525a67;
}
.person {
  display: inline-block;
  color: #87959f;
  line-height: 36px;
}
.info-bottom {
  width: 340px;
  height: 36px;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
</style>